<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频直播分类</title>
    <!--初始化默认样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--页面公共样式，包含头部、尾部等-->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/element-ui.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/flexible.js"></script>
    <script src="js/browser.min.js"></script>
    <script src="js/polyfill.min.js"></script>
    <link rel="stylesheet" href="css/livingCategory.css">
</head>
<body>
<div id="app" v-cloak>
    <!--头部-->
    <my-header></my-header>
    <!--头部结束-->

    <section class="banner">
        <my-banner :live-slide-list = "liveSlideList"></my-banner>
    </section>
    <section class="on-living">
        <div class="title">
            <p>正在直播</p>
            <a @click="toList(1)" class="font20">更多</a>
        </div>
        <div class="content">

            <div class="item-category" @click="toList(1)">
                <h1>正在直播</h1>
                <a class="font14">查看更多>>></a>
            </div>
            <div class="item-list">
                <ul>
                    <li v-cloak :class="{ lock:item.isPrivate == '1'}"  v-for="item in beingLiveList" :key="item.id" @click="toDetail(item.id)">
                        <p class="lock-icon" v-if="item.isPrivate == '1'"><img src="imgs/tri.png" alt=""></p>
                        <div class="class-img">
                            <a href="####"><img :src="item.images" alt="" class="respond-img"></a>
                            <p>
                                <span class="space-number font20">{{item.chid}}</span>
                                <span class="class-status">{{item.clicks}}人正在观看</span>
                            </p>
                        </div>
                        <div class="other-class-info">

                            <div class="sing-line-ellipsis other-class-name">
                                <a href="####" class="font20"> {{item.title}}</a>
                            </div>
                            <div class="other-class-user-info">
                                <div class="class-teacher"> {{item.fullname}}</div>
                                <div class="class-living">正在直播</div>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </section>
    <section class="unstart-living">
        <div class="title">
            <p>即将直播</p>
            <a @click="toList(2)" class="font20">更多</a>
        </div>
        <div class="content">
            <div class="item-category" @click="toList(2)">
                <h1>即将直播</h1>
                <a class="font14">查看更多>>></a>
            </div>
            <div class="item-list">
                <ul>

                    <li v-cloak :class="{ lock:item.isPrivate == '1'}"  v-for="item in willLiveList" :key="item.id" @click="toDetail(item.id)">
                        <p class="lock-icon" v-if="item.isPrivate == '1'"><img src="imgs/tri.png" alt=""></p>
                        <div class="class-img">
                            <a href="####"><img :src="item.images" alt="" class="respond-img"></a>
                            <p>
                                <span class="space-number font20">{{item.chid}}</span>
                            </p>
                        </div>
                        <div class="other-class-info">

                            <div class="sing-line-ellipsis other-class-name">
                                <a href="####" class="font20"> {{item.title}}</a>
                            </div>
                            <div class="other-class-user-info">
                                <div class="class-teacher"> {{item.fullname}}</div>
                                <div class="class-living">即将直播</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <section class="living-rank">
        <div class="title">
            <p>直播排行</p>
            <a @click="toList(3)" class="font20">更多</a>
        </div>
        <div class="content">
            <div class="item-category" @click="toList(3)">
                <h1>直播排行</h1>
                <a class="font14">查看更多>>></a>
            </div>
            <div class="item-list">
                <ul>
                    <li :class="{ lock:item.isPrivate == '1'}"  v-for="item in liveRankingList" :key="item.id" @click="toDetail(item.id)">
                        <p class="lock-icon" v-if="item.isPrivate == '1'"><img src="imgs/tri.png" alt=""></p>
                        <div class="class-img">
                            <a href="####"><img :src="item.images" alt="" class="respond-img"></a>
                            <p>
                                <span class="space-number font20">{{item.chid}}</span>
                                <span class="class-status">{{item.clicks}}人正在观看</span>
                            </p>
                        </div>
                        <div class="other-class-info">

                            <div class="sing-line-ellipsis other-class-name">
                                <a href="####" class="font20"> {{item.title}}</a>
                            </div>
                            <div class="other-class-user-info">
                                <div class="class-teacher"> {{item.fullname}}</div>
                                <div class="class-living">正在直播</div>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </section>
    <!--尾部-->
    <my-footer></my-footer>
    <!--尾部结束-->

</div>
<!--使用vue渲染页面-->
<script src="js/vue.development.js"></script>
<script src="js/axios.js"></script>
<script src="js/element-ui.js"></script>
<script src="js/js.cookie.js"></script>
<!--用于模拟接口，上线后注释-->
<script src="js/mock.js"></script>
<!--用于模拟接口，上线后注释-->
<script src="data/api.js"></script>
<script src="js/component.js"></script>
<script>

    // 组件需写在Vue根组件上面
    Vue.component('my-banner', {
        props: ['liveSlideList'],
        data: function () {
            return {
                // imgsSrc:this.liveSlideList
            }
        },
        computed:{
            imgsSrc:function () {
                return this.liveSlideList
            }
        },
        template: '<div class="block"><el-carousel height="6.57rem"><el-carousel-item v-for="item in imgsSrc" :key="item.id"><h3 class="small"><a href="####"  @click="toDetail(item.id)"><img :src="item.images"  alt=""></a></h3></el-carousel-item></el-carousel></div>',
        methods:{
            toDetail:function(value){
                window.location.href = "livingDetail.html?id="+value;
            }
        }
    })

    var App =  new Vue({
        el: '#app',
        data: function() {
            return {
                beingLiveList:[],
                liveRankingList:[],
                willLiveList:[],
                liveSlideList:[], //banner
                isLogin:false, //用户是否登录过
                loginuserInfo:{} //登录的用户信息
            }
        },
        methods:{
            getListInfo: function() {
                axios.get('http://livingCategoryListApi')
                // axios.get('http://localhost:8090/mode2/DataOne')
                    .then(this.getListInfoSucc)
            },
            getListInfoSucc:function (res) {
                if (res.status == 200 && res.data) {
                    res = res.data;
                    this.beingLiveList = res.live_page_response.result[0].beingLiveList;
                    this.liveRankingList = res.live_page_response.result[0].liveRankingList;
                    this.willLiveList = res.live_page_response.result[0].willLiveList;
                    this.liveSlideList = res.live_page_response.result[0].liveSlideList
                }
            },
            toDetail:function(value){
                window.location.href = "livingDetail.html?id="+value;
            },
            toList:function(index){
                window.location.href = "livingList.html?currentTab="+index;
            },
        },
        // 判断登录状态，拉取用户信息
        created:function () {
            this.getListInfo();
            if(this.$Cookies.get("userId") && this.$Cookies.get("userInfo")){
                this.loginuserInfo = this.$Cookies.get("userInfo");
                this.isLogin = true;
            }else{
                this.isLogin = false;
            }
        }
    })
</script>
</body>
</html>
